<template>
  <div class="home">
    <User />
    <div class="stage">
      <Sunlight />
      <Cloud />
      <GrassLand />
      <Chicken />
      <Egg />
    </div>
    <Nav />
    <PopMask />
  </div>
</template>

<script>
// @ is an alias to /src
// 鸡蛋
import Egg from "@/components/Egg.vue";
import Chicken from "@/components/Chicken.vue";

import Cloud from "@/components/Cloud.vue";

import GrassLand from "@/components/Grass.vue";

import Nav from "@/components/Nav.vue";

import PopMask from "@/components/PopMask.vue";

import Sunlight from "@/components/Sunlight.vue";

import User from "@/components/User.vue";

export default {
  name: "Home",
  components: {
    Chicken,
    Cloud,
    GrassLand,
    Nav,
    PopMask,
    Sunlight,
    User,
    Egg,
  },
  setup(props, ctx) {
    const openDraw = () => {
      console.log("open ...");
    };
    return {
      openDraw,
    };
  },
};
</script>
<style lang='scss' scoped>
.home {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  background-image: -webkit-linear-gradient(to bottom, #4aaeff, #fff);
  background-image: linear-gradient(to bottom, #4aaeff, #fff);
  overflow: hidden;
}
</style>
